<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script>
        -->
  <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
  <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
  <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/world.js"></script>
        -->
  <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        -->

  <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;



    option = {
      title: {
        text: 'Nightingale Chart',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: [
          'rose1',
          'rose2',
          'rose3',
          'rose4',
          'rose5',
          'rose6',
          'rose7',
          'rose8'
        ]
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Radius Mode',
          type: 'pie',
          radius: [20, 140],
          center: ['25%', '50%'],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data: [
            { value: 31, name: '谷歌DeepMind' },
            { value: 29, name: 'NVIDIA英伟达' },
            { value: 25, name: '亚马逊ALexa' },
            { value: 22, name: 'Facebook FAIR' },
            { value: 20, name: 'Microsoft微软' },
            { value: 15, name: '英特尔Nervana' },
            { value: 12, name: 'IBM Watson' },
            { value: 10, name: 'Apple苹果' },
            { value: 9, name: '百度AI' },
            { value: 8, name: '阿里巴巴' }
          ]
        // },
        // {
        //   name: 'Area Mode',
        //   type: 'pie',
        //   radius: [20, 140],
        //   center: ['75%', '50%'],
        //   roseType: 'area',
        //   itemStyle: {
        //     borderRadius: 5
        //   },
        //   data: [
        //     { value: 30, name: 'ai 1' },
        //     { value: 28, name: 'rose 2' },
        //     { value: 26, name: 'rose 3' },
        //     { value: 24, name: 'rose 4' },
        //     { value: 22, name: 'rose 5' },
        //     { value: 20, name: 'rose 6' },
        //     { value: 18, name: 'rose 7' },
        //     { value: 16, name: 'rose 8' }
        //   ]
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

  </script>
</body>

</html>